<template>
	<view class="container">
		<hy-nav-bar title="转发金" :background="{
			backgroundColor: 'rgba(0,0,0,0)'
		}" :border-bottom="false" :titleColor="'#000'" backIconColor="#000"></hy-nav-bar>
		<view class="balanceBox">
			<view>
				当前客户可领余额：{{ balance }} 元
			</view>
			<u-button class="btn" type="primary" size="mini" @click="recharge" ripple>充值</u-button>
		</view>
		<u-form :model="form" ref="formRef" class="form" label-position="top">
			<u-form-item label="转发朋友圈奖励：" prop="money" :label-width="280"><u-input placeholder="请输入金额"
					v-model="form.forwardFriendCircleReward" type="number" />
				<text>元/次</text></u-form-item>
			<u-form-item label="转发个人好友奖励：" prop="money2" :label-width="280"><u-input placeholder="请输入金额"
					v-model="form.forwardFriendReward" type="number" />
				<text>元/次</text></u-form-item>
				<u-form-item label="转发抖音奖励：" prop="money2" :label-width="280"><u-input placeholder="请输入金额"
					v-model="form.forwardDouyinReward" type="number" />
				<text>元/次</text></u-form-item>
			<u-button type="primary" @click="submit" style="margin-top: 30rpx" ripple>保存</u-button>
		</u-form>
		<view class="gap"></view>
		<view class="helpBox">
			<view class="title">红包说明</view>
			<view>1.红包是为商家提供的营销的流量通道</view>
			<view>2.设置后可更改，设置后即时生效</view>
			<view>3.奖励金仅用于用户转发您的名片和商品、视频。</view>
			<view>4.单个用户多次分享到同一位置或同一个人，每天仅视为1次</view>
			<view>5.考虑是否设置每天的上限</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad, onShow, onUnload, onReady } from '@dcloudio/uni-app';
import { useUserStore } from '@/store';
import { userApi } from '@/api';

const userStore = useUserStore()
const balance = ref(0)
const recharge = () => {
	uni.navigateTo({
		url: '/packageD/pages/forward/recharge'
	})
}
const form = reactive<{
	forwardFriendCircleReward: number | null
	forwardFriendReward: number | null
	forwardDouyinReward: number | null
}>({
	forwardFriendCircleReward: null,
	forwardFriendReward: null,
	forwardDouyinReward: null
})
const formRef = ref()
const rules = {
	forwardFriendCircleReward: [
		{ required: true, message: '转发朋友圈奖励', trigger: ['change', 'blur'] }
	],
	forwardFriendReward: [
		{ required: true, message: '转发个人好友奖励', trigger: ['change', 'blur'] }
	],
	forwardDouyinReward: [
		{ required: true, message: '转发抖音奖励', trigger: ['change', 'blur'] }
	]
}
onReady(() => {
	formRef.value.setRules(rules)
})

onLoad(() => {
	const { userInfo } = userStore
	form.forwardFriendCircleReward = userInfo.forwardFriendCircleReward
	form.forwardFriendReward = userInfo.forwardFriendReward
	form.forwardDouyinReward = userInfo.forwardDouyinReward
})


const submit = () => {
	formRef.value.validate(async (valid: Boolean) => {
		if (valid) {
			console.log('submit', form)
			uni.showLoading({ title: '保存中' })
			await userApi.userInfoUpdate({
				forwardFriendCircleReward: form.forwardFriendCircleReward,
				forwardFriendReward: form.forwardFriendReward,
				forwardDouyinReward: form.forwardDouyinReward
			}).finally(() => {
				uni.hideLoading()
				uni.showToast({
					title: '保存成功',
					icon: 'none',
					success: async() => {
						await userStore.getUserInfo()
						uni.navigateBack()
					}
				})
			})
		} else {
			console.log('error submit', form)
			uni.showToast({
				title: '请检查输入',
				icon: 'none'
			})
		}
	})
}
</script>

<style lang="scss" scoped>
.container {
	background: #fff;
	min-height: 100vh;

	.balanceBox {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			margin: 0;
		}
	}

	.form {
		padding: 0 20rpx 20rpx 20rpx;
	}

	.gap {
		height: 20rpx;
		background: #f8f8f8;
	}

	.helpBox {
		.title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		padding: 20rpx;
		line-height: 50rpx;
	}
}
</style>
